<template>
  <section>
    <ul id="lis">
      <Item
        @delToDoListItemById="delToDoListItemById"
        @changeCheckedToDoItem="changeCheckedToDoItem"
      />
    </ul>
  </section>
</template>

<script lang="ts">
import Item from '@/components/item/index.vue'

export default {
  name: 'List',
  components: {
    Item,
  },
  setup(props:any, { emit }:any) {
    /* 删除当前任务 */
    function delToDoListItemById(delToDoListItemById:number) {
      emit('delToDoListItemById', delToDoListItemById)
    }

    /* 改变当前任务选中状态 */
    function changeCheckedToDoItem(changeCheckedToDoItem:boolean) {
      emit('changeCheckedToDoItem', changeCheckedToDoItem)
    }

    return {
      delToDoListItemById,
      changeCheckedToDoItem,
    }
  }
}
</script>

<style scoped>
section ul {
  margin: 30px 0;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  padding: 0;
}
</style>